<template>
  <div id="artist-item">
    <div>{{ artistVO.name }}</div>
    <div class="icon">
      <el-icon size="20">
        <More />
      </el-icon>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ArtistVO } from '@/types/song'
import { More } from '@element-plus/icons-vue'

defineProps<{
  artistVO: ArtistVO
}>()
</script>

<style scoped>
#artist-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 3em;
  line-height: 3em;
  background-color: rgba(255, 147, 147, 0.5);
  margin-bottom: 2em;
  padding: 0 1em;
}

.icon {
  cursor: pointer;
  margin-right: 3em;
}
</style>
